<template>
  <div v-loading="loading"
       class="edu-page-warp">
    <ConditionCard shadow="never"
                   body-style="padding: 24px 24px 6px 24px;"
                   @search="refreshPage"
                   @reset="reset('queryForm')">
      <el-form ref="queryForm"
               :model="queryForm"
               label-position="right"
               label-width="100px">
        <el-row :gutter="24"
                style="height: 50px;">
          <el-col :span="8">
            <el-form-item label="开始时间 :"
                          prop="startTime">
              <el-date-picker v-model="queryForm.condition.operStartTime"
                              :editable="editable"
                              :picker-options="endDatePicker"
                              type="datetime"
                              format="yyyy/MM/dd HH:mm:ss"
                              placeholder="选择开始日期"
                              value-format="timestamp"
                              style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束时间 :"
                          prop="endTime">
              <el-date-picker v-model="queryForm.condition.operEndTime"
                              :editable="editable"
                              :picker-options="startDatePicker"
                              type="datetime"
                              format="yyyy/MM/dd HH:mm:ss"
                              value-format="timestamp"
                              placeholder="选择结束日期"
                              style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作类型 :"
                          prop="operationType">
              <el-select v-model="queryForm.condition.operType"
                         :placehodler="$t('score.all')"
                         style="width: 100%">
                <el-option v-for="item in options.operatingTypeList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24"
                style="height: 50px;">
          <el-col :span="8">
            <el-form-item label="操作人 :"
                          prop="operator">
              <el-input v-model="queryForm.condition.operName"
                        placeholder="请输入工号/姓名"
                        style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ConditionCard>
    <el-card v-loading="loading"
             shadow="never"
             body-style="padding: 24px;">
      <div class="edu-page-title mg-top">成绩操作日志列表</div>
      <div class="float-left">
        <el-input v-model="queryForm.condition.searchText"
                  placeholder="请输入学号/姓名搜索"
                  maxlength="50"
                  prefix-icon="el-icon-search"
                  @change="handSearchChang" />
      </div>
      <div class="float-right">
        <el-button type="primary"
                   @click="logExport('queryForm')">{{ $t('common.btn.export') }}</el-button>
        <!-- <el-button type="primary"
                   @click="refresh()">刷新</el-button> -->
      </div>
      <el-table :data="tableData"
                style="width: 100%"
                class="tableMarginTop"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55" />
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-width="100px">
              <el-row>
                <el-col :span="6">
                  <el-form-item :label="$t('minorScoreQueryLog.operator') + ' :'">
                    <span>{{ scope.row.studentId+scope.row.studentName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item :label="$t('minorScoreQueryLog.operatingType') + ' :'">
                    <span>{{ scope.row.operationTypeI18n }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item :label="$t('minorScoreQueryLog.operationIP') + ' :'">
                    <span>{{ scope.row.operationIp }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item :label="$t('minorScoreQueryLog.operateTime') + ' :'">
                    <span>{{ scope.row.operationDateStr }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item :label="$t('minorScoreQueryLog.oldInfo') + ' :'">
                    <span>{{ scope.row.oldText }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item :label="$t('minorScoreQueryLog.newInfo') + ' :'">
                    <span>{{ scope.row.changeText }}</span>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </template>
        </el-table-column>
        <el-table-column :label="$t('label.stuCode')"
                         prop="studentId"
                         show-overflow-tooltip
                         min-width="100"
                         align="center" />
        <el-table-column :label="$t('label.stuName')"
                         prop="studentName"
                         show-overflow-tooltip
                         width="80"
                         align="center" />
        <el-table-column :label="$t('minorScoreQueryLog.oldInfo')"
                         prop="oldText"
                         show-overflow-tooltip
                         align="center"
                         min-width="200" />
        <el-table-column :label="$t('minorScoreQueryLog.newInfo')"
                         prop="changeText"
                         show-overflow-tooltip
                         align="center"
                         min-width="200" />
        <el-table-column :label="$t('minorScoreQueryLog.operator')"
                         prop="operationPersonName"
                         show-overflow-tooltip
                         width="120"
                         align="center" />
        <el-table-column :label="$t('minorScoreQueryLog.operatingType')"
                         prop="operationTypeI18n"
                         show-overflow-tooltip
                         width="100"
                         align="center" />
        <el-table-column :label="$t('minorScoreQueryLog.operationIP')"
                         prop="operationIp"
                         show-overflow-tooltip
                         width="120"
                         align="center" />
        <el-table-column :label="$t('minorScoreQueryLog.operateTime')"
                         show-overflow-tooltip
                         width="160"
                         align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.operationDateStr }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('minorScoreQueryLog.operateDescription')"
                         prop="operationReason"
                         show-overflow-tooltip
                         width="120"
                         align="center" />
      </el-table>
      <div class="edu-pagination">
        <div class="float-right">
          <el-pagination :current-page="queryForm.pageNum_"
                         :page-sizes="[20,50,100,500,1000]"
                         :page-size="queryForm.pageSize_"
                         :total="queryForm.total_"
                         layout="total, sizes, prev, pager, next, jumper"
                         style="float: right;margin:10px 60px 0 0;"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange" />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import UTILS from 'common/src/utils/utils';
import api from 'common/src/api/score/bachelor/scoreOperateLog';
import apis from 'common/src/api/score/bachelor/macBinding';
import scoreManagementApi from 'common/src/api/scoreManagement/scoreManagement';
import { queryDic } from 'common/src/api/dictionary';
export default {
    name: 'minor-score-operater-log',
    data () {
        return {
            options: {
                operatingTypeList: []
            },
            tableData: [],
            ids: [],
            queryForm: {
                condition: { 
                      operType: '',
                      operStartTime: '',
                      operEndTime: '',
                      operName: '',
                      searchText: ''
                }, 
                pageNum_ : 1, 
                pageSize_ : 20, 
                total_ : 0 
            },
            searchText: '',
            multipleSelection: [],
            startDatePicker: this.startDate(),
            endDatePicker: this.endDate(),
            exportButton: false,
            exportResult: null
        };
    },
    mounted () {
        this.refreshPage();
        // this.getOptionTypeList();
        this.getOptions();
    },
    methods: {
        /**
           * 操作类型下拉列表
           */
        getOptions() {
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_CZLX_FX"]
            };
            queryDic(data).then(res => {
                this.options.college = [];
                UTILS.fillSelect(
                    {
                        operatingTypeList: "X_CZLX_FX"
                    },
                    res.data,
                    this.options
                );
            });
        },
        refresh() { // 刷新
            let params = {
                updateType: 0
            };
            apis.updateMacBinding(params).then(({ code })=>{
                if(code != 200)return;
            });
        },
        handleSizeChange (page) {
            this.queryForm.pageSize_ = page;
            this.refreshPage();
        },
        handSearchChang () {
            this.refreshPage();
        },
        handleCurrentChange (page) {
            this.queryForm.pageNum_ = page;
            this.refreshPage();
        },
        // 表格多选值
        handleSelectionChange (row) {
            this.multipleSelection = row;
            this.ids = [];
            this.multipleSelection.forEach((val, itm)=>{
                this.ids.push(val.id);
            });
        },
        startDate () {
            let that = this;
            return {
                disabledDate(time) {
                    if(that.queryForm.startTime) {
                        return new Date(time).getTime() < new Date(that.queryForm.startTime).getTime();
                    }
                }
            };
        },
        endDate () {
            let that = this;
            return {
                disabledDate(time) {
                    if(that.queryForm.endTime) {
                        return new Date(time).getTime() > new Date(that.queryForm.endTime).getTime();
                    }
                }
            };
        },
        formateDate () {
            return this.$moment(new Date().getTime()).format('YYYY/MM/DD');
        },
        getOptionTypeList () {
            scoreManagementApi.getMinorScoreOptionTypeList().then(({ code, data }) => {
                if(code != 200)return;
                data.forEach((item, index) => {
                    this.options.operatingTypeList.push({
                        label: item[index + 1],
                        value: index + 1,
                        key: index + 1
                    })
                })
            })
        },
        refreshPage () {
            let params = this.queryForm;
            params.condition.operStartTime = this.queryForm.condition.operStartTime != '' ? new Date(this.queryForm.condition.operStartTime).getTime() : '';
            params.condition.operEndTime = this.queryForm.condition.operEndTime != '' ? new Date(this.queryForm.condition.operEndTime).getTime() : '';
            // params.pageNum = this.queryForm.pageNum_;
            // params.pageSize = this.queryForm.pageSize_;
            // api.getTableList(params).then(({ code, data })=>{
            //     if(code != 200)return;
            //     this.tableData = data.list;
            //     this.pageParam.total = data.total_;
            // });
            
            scoreManagementApi.getScroeOperationLog(this.queryForm).then(({ code, data }) => {
                if(code != 200)return;
                this.tableData = data.list
                this.queryForm.total_ = data.total
            });
            
        },
        reset (ref) {
            for (let key in this.queryForm.condition) {
                this.queryForm.condition[key] = '';
            }

            this.queryForm.pageNum_ = 1;
            this.queryForm.pageSize_ = 20;
            this.refreshPage();
        },
        logExport () {
            if(this.ids.length <= 0) {
                this.$alert(
                    '请至少选择一条数据',
                    this.$t('message.prompt'),
                    { type: 'warning' }
                );
                return;
            } else{
                let params = this.queryForm.condition;
                // api.exportListData(this.ids);
                params.selectIds = this.ids.toString()
                scoreManagementApi.exportMinorScoreOperationLog(params);

            }
        }
    }
};
</script>
<style lang="scss">
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    padding-right: 20px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    min-width: 25%;
}
.demo-table-expand .el-form-item:nth-of-type(5),
.demo-table-expand .el-form-item:nth-of-type(6) {
    min-width: 50%;
}
.tableMarginTop {
    clear: both;
    position: relative;
    top: 20px;
}
</style>
